<template>

  <view :class="$style.power_container" @click="getClick">
    <collapse-panel :title-name="titleName" :showPage='showPage'></collapse-panel>
    <view :class="$style.dispatch_statistic" class="flex justify-around">
      <view class="flex items-baseline">
        <image :src="rImg" :class="$style.label" />
        <view :class="$style.number">{{ props.powerInfo.czrs || 0 }} <view :class="$style.dw">人</view>
        </view>
      </view>
      <view class="flex items-baseline">
        <image :src="cImg" :class="$style.label" />
        <view :class="$style.number">{{ props.powerInfo.cdcls || 0 }} <view :class="$style.dw">车</view>
        </view>
      </view>
      <view class="flex items-baseline">
        <image :src="dImg" :class="$style.label" />
        <view :class="$style.number">{{ props.powerInfo.czdzs || 0 }} <view :class="$style.dw">队</view>
        </view>
      </view>
    </view>

    <view :class="$style.dispatch_detail" v-if="!showPage">

      <!-- 出动力量仪表盘 -->
      <!-- <view :class="$style.zszlbox_group">
        <view :class="$style.zszlbox">
          <qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
        </view>
        <view :class="$style.zszlbox">
          <qiun-data-charts type="gauge" :opts="Bopts" :chartData="BchartData" />
        </view>
        <view :class="$style.zszlbox">
          <qiun-data-charts type="gauge" :opts="Aopts" :chartData="AchartData" />
        </view>
        <view :class="$style.zsl_num">{{ props.powerInfo.zsl || 0 }} (吨)</view>
        <view :class="$style.alpm_num">{{ props.powerInfo.alpm || 0 }} (升)</view>
        <view :class="$style.blpm_num">{{ props.powerInfo.blpm || 0 }} (升)</view>
      </view> -->
      <view style="margin:50rpx  0 20rpx 0 ">
        <view class="overview flex justify-between">
          <view class="flex">
            <image :src="stationImg" mode="widthFix" style="width: 40rpx;" />
            <view :class="$style.detail_info">{{ stationInfo[0].jgjc || "夫子庙站" + '（' + stationInfo[0].cdcls + '车' +
                stationInfo[0].czRs + '人' + '）'
            }}
            </view>
          </view>
          <view class="flex">
            <image :src="phoneImg" mode="widthFix" style="width: 40rpx; margin-right:30rpx;"
              @click="callUpToPhone(stationInfo[0].lxfs || '')"></image>
            <view :class="$style.state" v-show="stationInfo[0].zzztdm !== null">{{ getAlertState(stationInfo[0].zzztdm)
            }}
            </view>
          </view>
        </view>
        <!-- <view v-for="(car, carIndex) in stationInfo[0].cdclList" :key="carIndex" class="detail flex justify-between"
          style="margin:15rpx  0 ">
          <view class="flex" style="margin-left: 70rpx">
            <view :class="$style.text">{{ car.wx + '部车' || (carIndex + 1) + '部车' }}</view>
            <view :class="$style.text">{{ getAlertLevel(car.zzgndm) }}</view>
            <view :class="$style.text">{{ car.jdchphm }}</view>
          </view>
          <view :class="$style.state" v-show="car.clztdm !== null">{{ getAlertState(car.clztdm) }}</view>
        </view> -->
        <!-- <view :class="$style.split_line" v-if="stationInfo.length > 1"></view> -->
      </view>
    </view>



    <view :class="$style.dispatch_detail" v-if="showPage">

      <!-- 出动力量仪表盘 -->
      <!-- <view :class="$style.zszlbox_group">
        <view :class="$style.zszlbox">
          <qiun-data-charts type="gauge" :opts="opts" :chartData="chartData" />
        </view>
        <view :class="$style.zszlbox">
          <qiun-data-charts type="gauge" :opts="Bopts" :chartData="BchartData" />
        </view>
        <view :class="$style.zszlbox">
          <qiun-data-charts type="gauge" :opts="Aopts" :chartData="AchartData" />
        </view>
        <view :class="$style.zsl_num">{{ props.powerInfo.zsl || 0 }} (吨)</view>
        <view :class="$style.alpm_num">{{ props.powerInfo.alpm || 0 }} (升)</view>
        <view :class="$style.blpm_num">{{ props.powerInfo.blpm || 0 }} (升)</view>
      </view> -->
      <view v-for="(item, index) in stationInfo" :key="index" style="margin:50rpx  0 20rpx 0 ">
        <view class="overview flex justify-between">
          <view class="flex">
            <image :src="stationImg" mode="widthFix" style="width: 40rpx;" />
            <view :class="$style.detail_info">{{ item.jgjc || "夫子庙站" + '（' + item.cdcls + '车' + item.czRs + '人' + '）' }}
            </view>
          </view>
          <view class="flex">
            <image :src="phoneImg" mode="widthFix" style="width: 40rpx; margin-right: 30rpx;"
              @click="callUpToPhone(item.lxfs || '')"></image>
            <view :class="$style.state" v-show="item.zzztdm !== null">{{ getAlertState(item.zzztdm) }}</view>
          </view>
        </view>

        <view v-for="(car, carIndex) in item.cdclList" :key="carIndex" class="detail flex justify-between"
          style="margin:15rpx  0 ">
          <view class="flex" style="margin-left: 70rpx">
            <view :class="$style.text">{{ car.wx + '部车' || (carIndex + 1) + '部车' }}</view>
            <view :class="$style.text">{{ getAlertLevel(car.zzgndm) }}</view>
            <view :class="$style.text">{{ car.jdchphm }}</view>
          </view>
          <view :class="$style.state" v-show="car.clztdm !== null">{{ getAlertState(car.clztdm) }}</view>
        </view>
        <!-- <view :class="$style.split_line" v-if="stationInfo.length - index > 1"></view> -->
      </view>
    </view>

  </view>

</template>

<script setup lang='ts'>
/**
 * 出动力量模块
 */

import CollapsePanel from "@/components/common/collapse-panel.vue";
import { onMounted, ref, watch } from "vue";
import { queryDispatchPower } from "@/api";
import { alertState } from "@/static";
import { callUpToPhone } from '@/utils'

import stationImg from "@/static/images/alert-detail/station.png";
import phoneImg from "@/static/images/alert-detail/phone.png";

import cImg from "@/static/images/common/c.png";
import dImg from "@/static/images/common/d.png";
import rImg from "@/static/images/common/r.png";
interface Props {
  powerInfo: any
};

const props = defineProps<Props>();
const powerInfo = watch(
  () => props.powerInfo,
  (newValue) => {
    console.log(newValue);
    // getServerData()
    // getServerDataA()
    // getServerDataB()
  }
);

const chartData = ref<any>({});
const AchartData = ref<any>({});
const BchartData = ref<any>({});
// const opts = ref<any>(
//   {
//     color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
//     padding: undefined,
//     title: {
//       name: "载水总量",
//       fontSize: 12,
//       color: "#333",
//       offsetY: 40
//     },
//     subtitle: {
//       name: "",
//       fontSize: 12,
//       color: "#fff",
//       offsetY: 0
//     },
//     extra: {
//       gauge: {
//         type: "default",
//         width: 5,
//         labelColor: "rgba(0,0,0,0)",
//         startAngle: 0.75,
//         endAngle: 0.25,
//         startNumber: 0,
//         endNumber: props.powerInfo.zsl == 0 ? 50 : props.powerInfo.zsl,
//         labelFormat: "",
//         splitLine: {
//           fixRadius: 0,
//           splitNumber: 0,
//           width: 0,
//           color: "#FFFFFF",
//           childNumber: 5,
//           childWidth: 12
//         },
//         pointer: {
//           width: 10,
//           color: "auto"
//         }
//       }
//     }
//   }
// );
// const Aopts = ref<any>(
//   {
//     color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
//     padding: undefined,
//     title: {
//       name: "A类泡沫",
//       fontSize: 12,
//       color: "#333",
//       offsetY: 40
//     },
//     subtitle: {
//       name: "",
//       fontSize: 12,
//       color: "#fff",
//       offsetY: 0
//     },
//     extra: {
//       gauge: {
//         type: "default",
//         width: 5,
//         labelColor: "rgba(0,0,0,0)",
//         startAngle: 0.75,
//         endAngle: 0.25,
//         startNumber: 0,
//         endNumber: props.powerInfo.alpm == 0 ? 50 : props.powerInfo.alpm,
//         labelFormat: "",
//         splitLine: {
//           fixRadius: 0,
//           splitNumber: 0,
//           width: 0,
//           color: "#FFFFFF",
//           childNumber: 5,
//           childWidth: 12
//         },
//         pointer: {
//           width: 10,
//           color: "auto"
//         }
//       }
//     }
//   }
// );
// const Bopts = ref<any>(
//   {
//     color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
//     padding: undefined,
//     title: {
//       name: "B类泡沫",
//       fontSize: 12,
//       color: "#333",
//       offsetY: 40
//     },
//     subtitle: {
//       name: "",
//       fontSize: 12,
//       color: "#fff",
//       offsetY: 0
//     },
//     extra: {
//       gauge: {
//         type: "default",
//         width: 5,
//         labelColor: "rgba(0,0,0,0)",
//         startAngle: 0.75,
//         endAngle: 0.25,
//         startNumber: 0,
//         endNumber: props.powerInfo.blpm == 0 ? 50 : props.powerInfo.blpm,
//         labelFormat: "",
//         splitLine: {
//           fixRadius: 0,
//           splitNumber: 0,
//           width: 0,
//           color: "#FFFFFF",
//           childNumber: 5,
//           childWidth: 12
//         },
//         pointer: {
//           width: 10,
//           color: "auto"
//         }
//       }
//     }
//   }
// );

// function getServerData() {
//   // console.log(props.powerInfo.zsl / 1000)
//   setTimeout(() => {
//     //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
//     let res = {
//       categories: [{ "value": 1, "color": "#7082F0" }],
//       series: [
//         {
//           name: "完成率",
//           data: props.powerInfo.zsl == 0 ? props.powerInfo.zsl : props.powerInfo.zsl / props.powerInfo.zsl
//         }
//       ]
//     };
//     chartData.value = JSON.parse(JSON.stringify(res));
//   }, 500);
// }

// function getServerDataA() {
//   setTimeout(() => {
//     //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
//     let res = {
//       categories: [{ "value": 1, "color": "#7082F0" }],
//       series: [
//         {
//           name: "完成率",
//           data: props.powerInfo.alpm == 0 ? props.powerInfo.alpm : props.powerInfo.alpm / props.powerInfo.alpm
//         }
//       ]
//     };
//     AchartData.value = JSON.parse(JSON.stringify(res));
//   }, 500);
// }

// function getServerDataB() {
//   setTimeout(() => {
//     //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
//     let res = {
//       categories: [{ "value": 1, "color": "#7082F0" }],
//       series: [
//         {
//           name: "完成率",
//           data: props.powerInfo.blpm == 0 ? props.powerInfo.blpm : props.powerInfo.blpm / props.powerInfo.blpm
//         }
//       ]
//     };
//     BchartData.value = JSON.parse(JSON.stringify(res));
//   }, 500);
// }


function getClick() {
  showPage.value = !showPage.value
}

onMounted(() => {
  // getServerData()
  // getServerDataA()
  // getServerDataB()
  getList()
})

const titleName = ref<string>("出动力量");
const showPage = ref<any>(false);
const dispatchStatistic = ref<Array<any>>([
  { label: rImg, number: 31 },
  { label: cImg, number: 5 },
  { label: dImg, number: 2 },
]);
const stationInfo = ref<Array<any>>([
  {
    "jgId": "10033a1bbb6045adb72f256d63b294b3",
    "jgjc": "北京西路站",
    "zzztdm": "5",
    "czRs": 20,
    "cdcls": 4,
    "cdclList": [
      {
        "clxxId": "297ecbb6413d791b0141543b6de57c1f",
        "xfjgId": "10033a1bbb6045adb72f256d63b294b3",
        "jgjc": "北京西路站",
        "zblxdm": "21010103",
        "zzgndm": null,
        "clztdm": null
      },
      {
        "clxxId": "2c98902075cfb5b301761e2101044aa4",
        "xfjgId": "10033a1bbb6045adb72f256d63b294b3",
        "jgjc": "北京西路站",
        "zblxdm": "21010102",
        "zzgndm": null,
        "clztdm": "60"
      },
    ],
  },
]);

const ajxxId = ref<string>('202205250525')


function getAlertLevel(levelNumber: string) {
  return '水罐车'
}

function getAlertState(state: string) {
  return alertState[state];
}

function getList() {
  queryDispatchPower({ ajxxId: ajxxId.value }).then((res: any) => {
    stationInfo.value = res.data
    console.log('powerInfo.value', powerInfo)
  })
}

</script>

<style lang='less' module>
.power_container {
  width: calc(100% - 60rpx);
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 10rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;

  .dispatch_statistic {
    .label {
      font-size: 26rpx;
      color: #333333;
      margin-right: 10rpx;
      width: 61rpx;
      height: 61rpx;
      margin-top: 2rpx;

    }

    .number {
      display: flex;
      font-size: 62rpx;
      font-weight: bold;
      color: #2264d3;

      .dw {
        font-size: 24rpx;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        margin: 37rpx 0 0 10rpx;
      }
    }
  }

  .dispatch_detail {
    font-size: 26rpx;
    color: #999999;
    margin-top: 30rpx;
    position: relative;

    .zszlbox {
      //  margin-left: -95rpx;
      overflow-x: hidden;
      width: 30% !important;
      height: 260rpx !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .detail_info {
      margin-left: 15rpx;
    }
  }

  .state {
    background: #00d195;
    border-radius: 8rpx;
    padding: 5rpx 10rpx;
    font-size: 22rpx;
    color: #ffffff;
    margin-right: 10rpx;
  }

  .split_line {
    width: calc(100% - 20rpx);
    height: 1rpx;
    background: #cccccc;
    margin-left: 10rpx;
  }

  .text {
    margin-right: 40rpx;
  }

  .zszlbox_group {
    display: flex;
    justify-content: space-around;

    // position: relative;
    .zsl_num {
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      position: absolute;
      top: 251rpx;
      left: 29rpx;
      z-index: 999999;
      width: 25%;
      text-align: center;
    }

    .alpm_num {
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      position: absolute;
      top: 251rpx;
      right: 29rpx;
      z-index: 999999;
      width: 25%;
      text-align: center;
    }

    .blpm_num {
      font-size: 24rpx;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
      position: absolute;
      top: 251rpx;
      left: 250rpx;
      z-index: 999999;
      width: 25%;
      text-align: center;

    }
  }
}
</style>
